<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>卖座电影展示</h2>
    <hr>
    <ul>
        <li>正在热映</li>
        <li>即将上映</li>
    </ul>
    <hr>
    <div id="container">


    </div>
    <button id="btn">点击加载更多...</button>
</body>
<!-- axios -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<script>

    let page = 1;
    let total = 0;
    let totalPage = 0;
    let isLoading = false;


    $("#btn").click(function () {

        page++;

        if (page > totalPage) {
            alert("没有更多数据了");
            return;
        }

        getMovieList(page);



    })

    function getMovieList(page = 1, pageSize = 2) {
        let url = `/api/v1/maizuo/lst?pageNum=${page}&pageSize=${pageSize}&type=2&k=6875894`;
        isLoading = true;
        axios.get(url).then(function (res) {
            console.log(res);
            let { data: { data: { films } } } = res;
            total = res.data.data.total;
            isLoading = false;

            /* 总页数 */
            totalPage = Math.ceil(total / pageSize);

            console.log(films);
            let html = ``;
            for (let item of films) {
                html += `<ul>
                        <li>序号：${item.filmId}</li>
                        <li>名称：${item.name}</li>
                        <li>导演：${item.director}</li>
                        <li>封面：<img  width="100" src="${item.poster}">  </li>
                    </ul>`;

            }
            $("#container").append(html);

        })

    }


    getMovieList();



</script>


</html>